<script setup lang="ts">
import { computed, inject } from 'vue'

const {
  activePersonType,
  activeScanType,
  activePart,
  protocolDetails,
  activeProtocolRef
} = inject('protocols') as any

const activeProtocolListRef = computed(() => {
  return protocolDetails.value.filter(item => {
    return item.personType === activePersonType.value && item.scanPart === activePart.value && item.scanType === activeScanType.value
  })
})

const tableData = computed(() => {
  if (activeProtocolListRef.value.length > 0) {
    return activeProtocolListRef.value[0].protocols.map(item => {
      return {
        protocolId: item.protocolId,
        protocolName: item.protocolName,
        keywords: `${item.params.kV.value}kV, ${item.params.mA.value}mA`,
        params: item.params
      }
    })
  } else {
    return []
  }
})


const activeParamsRef = computed(() => {
  if (activeProtocolRef.value.activeProtocolId === '') {
    return {}
  }
  const arr = tableData.value.filter(item => item.protocolId === activeProtocolRef.value.activeProtocolId)
  if (arr.length === 0) {
    return {}
  }
  const { params, keywords } = arr[0]
  Object.assign(activeProtocolRef.value, {
    params: params,
    keywords: keywords
  })
  return params
})

const handleCurrentChange = (row) => {
  if (row) {
    Object.assign(activeProtocolRef.value, {
      activeProtocolId: row.protocolId
    })
  }
}

</script>

<template>
  <div class="w-full h-[445px] flex flex-col">
    <div class="flex-1">
      <el-table :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                stripe style="width: 100%">
        <el-table-column prop="protocolName" label="Name" width="180" />
        <el-table-column prop="keywords" label="Keywords" />
      </el-table>
    </div>
    <div class="w-full h-[150px]  border">
      参数详情
      <div class="w-full h-full overflow-auto">
        <div v-for="(val,key) in activeParamsRef">
          {{ key }},{{ val }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
